<template>
    <div class="manage">
        <div class="manage-header">
            <div style="height: 1px;"></div>
            <!-- form搜索区域 -->
            <el-form :inline="true">
                <el-form-item>
                    <el-input v-model="modelName" placeholder="请输入模型名称（支持模糊查询）"></el-input>
                </el-form-item>
                <el-button type="primary" @click="searchByModelName()"> 排序 </el-button>
            </el-form>
        </div>
        <div class="common-table">
            <el-table
                stripe
                :data="modelList"
                style="width: 100%"
                height="90%">
                    <el-table-column
                        prop="modelName"
                        label="版本名" width="340">
                        <template slot-scope="scope">
                            <div style="width: 250px;height: 20px; overflow-y:hidden;"><label>{{ scope.row.modelName }}</label></div>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="accuracyRate"
                        label="准确率" sortable>
                        <template slot-scope="scope">
                            <el-progress :percentage="((scope.row.accuracyRate)*100).toFixed(1)" :color="getStatus(`${scope.row.accuracyRate}`)"></el-progress>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="lossRate"
                        label="损失率" sortable width="150">
                    </el-table-column>
                    <el-table-column
                        label="可识别中草药个数" sortable width="200">
                        <template slot-scope="scope">
                            <lable>{{ modelHerbLinkNum[scope.row.id] }}</lable>
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="状态" width="120">
                        <template slot-scope="scope">
                            <el-tooltip :content="scope.row.status=='1'?'停用':'启用'" placement="top">
                                <el-switch
                                    v-model="scope.row.status"
                                    active-color="#13ce66"
                                    inactive-color="#ff4949"
                                    active-value="1"
                                    inactive-value="0"
                                    @change="changeModelStatus(scope.row)"
                                    >
                                </el-switch>
                            </el-tooltip>
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="操作"  width="120">
                        <template slot-scope="scope">
                            <el-button size="mini" type="danger" @click="deleteModel(scope.row.id)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="pager">
                    <el-pagination
                        layout="prev, pager, next"
                        :total="total"
                        :page-size="pageData.size"
                        @current-change="handlePage">
                    </el-pagination>
                </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
      return {
        modelName:"",
        modelList:[],
        tableData:[

        ],
        modelHerbLinkNum:{},
        total:0,
        pageData:{
            page:1,
            size:10
        },
        targetModel:{
                id: "",
                model:{
                    layearOne:{},
                    layearTwo:{},
                    layearThree:{}
                },
            },
      };
    },
    methods: {
        searchByModelName(){
            this.$axios.get("/getModelList",{params:{modelName:this.modelName}}).then(({data}) => {
                console.log(data)
                this.modelList=data.list
                this.total=data.count
                for (let i = 0; i < data.list.length; i++) {
                    if(data.list[i].status==1){
                        this.targetModel.id=data.list[i].id
                    }
                }
            })
        },  
        getModelHerbLinkNum(){
            this.$axios.get("/getModelHerbLinkNum").then(({data}) => {
                console.log(data)
                this.modelHerbLinkNum=data.data.modelHerbLinkNum
            })
        },
        deleteModel(id){
            this.$confirm('此操作将永久删除该模型, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                    this.$axios.delete("/deleteModel",{data: {id: id}}).then(({data}) => {
                        if(data.code==200){
                            this.$message({
                                type: 'success',
                                message: data.data.message
                            });
                            this.getModelList();
                        }else{
                            this.$message({
                                type: 'error',
                                message: data.data.message
                            });
                        }
                    }).catch(()=>{
                        this.$message({
                                type: 'error',
                                message: "模型删除失败"
                            });
                    })
                }).catch(()=>{
                    this.$message({
                        type: 'info',
                        message: "取消模型删除"
                    });
                })
        },
        changeModelStatus(model){
            let newVal=model.status
            let tips=""
            if(newVal==1){
                tips="此操作将启用该模型作为当前系统的使用模型, 是否继续?"
            }else{
                tips="此操作将停用该模型作为当前系统的使用模型, 是否继续?"
            }
            this.$confirm(tips, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                    this.$axios.post("/changeModelStatus",{targetUseModelId:model.id,currentUseModelId:this.targetModel.id}).then(({data}) => {
                        if(data.code==200){
                            this.$message({
                                type: 'success',
                                message: data.data.message
                            });
                            this.getModelList();
                        }else{
                            this.$message({
                                type: 'error',
                                message: data.data.message
                            });
                            if(newVal=='1'){
                                model.status='0'
                            }else{
                                model.status='1'
                            }
                        }
                    }).catch(()=>{
                        if(newVal=='1'){
                            model.status='0'
                        }else{
                            model.status='1'
                        }
                    })
                }).catch(()=>{
                    this.$message({
                        type: 'info',
                        message: "取消成功"
                    });
                    if(newVal=='1'){
                        model.status='0'
                    }else{
                        model.status='1'
                    }
                })
        },
        getModelList(){
            this.$axios.get("/getModelList",{params:{...this.pageData}}).then(({data}) => {
                console.log(data)
                this.modelList=data.list
                this.total=data.count
                for (let i = 0; i < data.list.length; i++) {
                    if(data.list[i].status==1){
                        this.targetModel.id=data.list[i].id
                    }
                }
            })
        },
        getStatus(val){
            val=Number(val)*100
            let color=""
            if(val>=80){
                color="#409eff"
            }else if(val<80 && val>=60){
                color="#e6a23c"
            }else{
                color="#f56c6c"
            }
            return color
        },
        submit(){
            this.$refs.form.validate((valid) => {
                if(valid){
                    1
                }
             });
        },
        handlePage(val){
            this.pageData.page = val
            this.getModelList()
        },
     },
     mounted() {
        this.getModelList()
        this.getModelHerbLinkNum()
    }
  };
</script>

<style lang="less" scoped>
.manage{
    height:90%;
    .manage-header{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .common-table{
        position: relative;
        height: calc(100% - 62px);
        .pager{
            position: absolute;
            bottom: 0;
            right: 20px;
        }
    }
}
</style>